<template>
  <div class="loginCart">
    <hr />

    <el-dialog
      title="登录"
      :visible.sync="orderAddFormVisible"
      width="50%"
      :before-close="handleClose"
    >
      <login-form></login-form>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>

    <div class="login" v-if="this.$store.state.user != ''">
      <span class="left">
        <span>
          <el-avatar shape="square" icon="el-icon-user-solid"></el-avatar>
        </span>
        &nbsp;
        <span>{{ this.$store.state.user.name }}</span>
        &nbsp;
        <el-tag
          v-if="this.$store.state.user.type == 1"
          size="mini"
          type="warning"
          style="line-height: 20px; font-size: 10px"
          >管理员</el-tag
        >
        <el-tag
          v-if="this.$store.state.user.type == 0"
          size="mini"
          type="warning"
          style="line-height: 20px; font-size: 10px"
          >普通用户</el-tag
        >
      </span>
      <span class="right" @click="exit">
        <i class="el-icon-switch-button"></i>
      </span>
    </div>
    <div
      class="no-login"
      v-if="this.$store.state.user == ''"
      @click="orderAddFormVisible = true"
    >
      点击登录
    </div>
  </div>
</template>


<script>
import LoginForm from "./LoginForm.vue";

export default {
  components: { LoginForm },
  name: "LoginCart",
  data() {
    return {
      orderAddFormVisible: false,
    };
  },
  methods: {
    exit() {
      this.$store.commit("setUser", "");
      window.localStorage.removeItem('user');
    },
  },
};
</script>


<style lang="less" scoped>
.loginCart {
  height: 40px;
  padding: 0 10px;
  overflow: hidden;
  .login {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      span {
        display: inline-block;
        font-size: 18px;
        line-height: 35px;
      }
    }
    .right {
      font-size: 25px;
    }
  }
  .no-login {
    text-align: center;
  }
}
</style>


<style>
.el-avatar {
  width: 30px !important;
  height: 30px !important;
}
</style>